import React from 'react';
import { getGradient } from '../../utils/colors';
import './index.less';

interface ITimeSeriesLabelProps {
  value: string[];
  current?: string | string[];
  onClick?: (lb: string, rgb: string) => void;
}

const TimeSeriesLabel = (props: ITimeSeriesLabelProps) => {
  const { value, current, onClick } = props;

  const bgColor = React.useMemo(() => {
    if (current) {
      const idx = value.findIndex((v) => v === current);
      return getGradient(idx);
    }
    return '#ececec';
  }, [value, current]);

  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        {value.map((it: string, idx: number) => (
          <div key={it} style={{ paddingRight: '10px' }}>
            <div
              className={`time-series-label ${current === it ? 'time-series-label-select' : ''}`}
              role="button"
              style={{ borderLeft: `3px solid ${getGradient(idx)}`, background: `${current === it ? bgColor : '#ececec'}` }}
              onClick={() => {
                onClick && onClick(it, getGradient(idx));
              }}
            >
              {it} <span style={{ color: `${current === it ? '#fff' : '#aaa'}` }}>[{idx + 1}]</span>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

export default TimeSeriesLabel;
